<template>
  <!--弹窗组件-->
  <div class="arrow_box right" :style="userStyle">
    <p class="titles" v-if="data.iotDevType">{{data.iotDevType.useType}}
      ({{data.name}})</p>
    <Row v-for="(item, index) in data.iotCollItemDatas" :key="index">
      <Col span="6">{{item.name}}</Col>
      <Col span="14" style="text-align: center">{{item.value}}</Col>
      <Col span="4" style="text-align: right">{{item.unit}}</Col>
    </Row>
    <Spin size="large" fix v-if="switches.loadingDataStatus"></Spin>
  </div>
</template>

<script>
  export default {
    name: 'Pupus',
    props: ['top', 'left', 'did'],
    mounted () {
      if (this.did) {
        this.loadCurData()
        this.switches.loadingDataStatus = true
        this.timer = setInterval(() => {
          this.loadCurData()
        }, 2000)
      }
    },
    data: function () {
      return {
        visible: false,
        timer: 0,
        data: {},
        switches: {
          loadingDataStatus: false // 加载状态
        },
      }
    },
    methods: {
      switcher: function () {
        this.visible = !this.visible
      },
      hide: function () {
        this.visible = false
      },
      show: function () {
        this.visible = true
      },
      loadCurData: function () {
        let param = {id: this.did}
        window.myapi.cur_data(param).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.data = resp.data.data
          } else {
            this.$Notice.error({
              title: '返回数据异常！'
            })
          }
        }).catch(() => {
          this.$Message.error('数据异常')
        }).finally(() => {
          this.switches.loadingDataStatus = false
        })
      }
    },
    computed: {
      userStyle: function () {
        return 'left:' + (this.left) + 'px;top:' + (this.top) + 'px'
      }
    },
    beforeDestroy() {
      // 销毁函数---- 执行收尾工作  cur_data
      window.clearInterval(this.timer)
    }
  }
</script>

<style scoped>
  .main {
    position: absolute;
  }

  .titles{
    border-bottom: dashed 1px #c5c5c5;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: bold;
  }

  /*箭头主体样式 start*/
  .arrow_box {
    position: absolute;
    border: 1px solid #a0a0a3;
    padding: 10px;
    min-width: 250px;
    min-height: 100px;
    border-radius: 6px;
    z-index: 100000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #ebebe4;
  }
  .arrow_box:before,
  .arrow_box:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: solid transparent;
    pointer-events: none;
    content: "";
    border-color: rgba(215, 215, 215, 0);
  }

  .arrow_box.right:before {
    border-right-color: #a0a0a3;
    /*border-right-color: #d7d7d7;*/
    border-width: 13px;
    top: 28%;
    right: 100%;
  }

  .arrow_box.right:after {
    border-right-color: #f4f4f4;
    border-width: 10px;
    top: 30%;
    right: 100%;
  }

  /*箭头主体样式 end*/

</style>
